/**
 * @name: index
 * @author: zhangYuanTao
 * @date: 2021-07-14 15:54
 * @description：header
 * @update: 2021-07-14 15:54
 */
import React, { memo } from 'react';
import { headerLinks } from '../../common/local-data'
import {
  HeaderLeft,
  HeaderRight,
  HeaderWrapper
} from './style'
import { NavLink } from "react-router-dom";
import { Input } from "antd";
import { SearchOutlined } from "@ant-design/icons";

export default memo(function ZYTAppHeader() {

  // 页面代码
  const showSelectItem = (item, index) => {
    if (index < 3) {
      return (
        <NavLink exact to={ item.link }>
          { item.title }
          <i className="sprite_01 icon" />
        </NavLink>
      )
    } else {
      return <a href={ item.link }>{ item.title }</a>
    }
  }

  //jsx
  return (
    <HeaderWrapper>
      <div className="content wrap-v1">
        <HeaderLeft>
          <a href={ "#/" } className="logo sprite_01">网易云音乐</a>
          <div className="select-list">
            {
              headerLinks.map((item, index) => {
                  return (
                    <div key={ item.title } className="select-item">
                      { showSelectItem(item, index) }
                    </div>
                  )
                }
              )
            }
          </div>
        </HeaderLeft>
        <HeaderRight>
          <Input className="search" placeholder="音乐/视频/电台/用户" prefix={ <SearchOutlined /> } />
          <div className="center">创作者中心</div>
          <div>登录</div>
        </HeaderRight>
      </div>
      <div className="divider" />
    </HeaderWrapper>
  )
})
